<template>
  <bigScreenContainer autoFullScreen>
    <div class="bgPage">
      <div id="animations">
        <div class="animation animation1">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation2">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation3 fanzhuan">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation4">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation5 fanzhuan">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation6">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation7 fanzhuan">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation8">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation9 fanzhuan">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
        <div class="animation animation10">
          <div
            class="animate1"
            :style="{
              background: `url(${componentContent.imageMap['1']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate2"
            :style="{
              background: `url(${componentContent.imageMap['2']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
          <div
            class="animate3"
            :style="{
              background: `url(${componentContent.imageMap['3']}) no-repeat center center`,
              backgroundSize: 'contain',
            }"
          ></div>
        </div>
      </div>
      <div class="HomePageClass" id="HomePageClass">
        <div
          class="page_header"
          :style="{
            background: `url(${componentContent.imageMap['daohang']}) no-repeat`,
            'background-size': '100% 100%',
          }"
        >
          <span>销售看板</span>
        </div>
        <div class="homeContent">
          <div class="topArea">
            <div class="top_left">
              <div class="top_top">
                <div
                  class="title_guangyun"
                  :style="{
                    background: `url(${componentContent.imageMap['guangyun']}) no-repeat`,
                    'background-size': '100% 100%',
                  }"
                ></div>
                <div class="title_sb">
                  <div
                    class="title_bg"
                    :style="{
                      background: `url(${componentContent.imageMap['titlebg']}) no-repeat`,
                      'background-size': '100% 100%',
                    }"
                  >
                    <span>销售目标</span>
                  </div>
                </div>
                <div class="chart_sb" ref="sss">
                  <div class="com_box">
                    <div class="st_xsyy">
                      <div class="left">
                        <div class="com_chart" ref="salesChart"></div>
                      </div>
                      <div class="right">
                        <div>
                          <span>年度销售目标：</span
                          ><label>{{ xsyyData.xsmb_ndxsmb }}</label>
                        </div>
                        <div>
                          <span>年度销售金额：</span
                          ><label>{{ xsyyData.xsmb_ndxsjr }}</label>
                        </div>
                        <div style="margin-bottom: 10px">
                          <span>同比销售金额：</span
                          ><label>{{ xsyyData.xsmb_tbxsjr }}</label>
                          <p>同比增长{{ xsyyData.xsmb_tbxszb }}%</p>
                        </div>
                        <!-- <div>
									<span>意向：</span><label style="margin-right: 80px;">{{ xsyyData.yx }}</label><span>商机：</span><label>{{ xsyyData.sj }}</label>
								</div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="top_bottom">
                <div
                  class="title_guangyun"
                  :style="{
                    background: `url(${componentContent.imageMap['guangyun']}) no-repeat`,
                    'background-size': '100% 100%',
                  }"
                ></div>
                <div class="title_sb">
                  <div
                    class="title_bg"
                    :style="{
                      background: `url(${componentContent.imageMap['titlebg']}) no-repeat`,
                      'background-size': '100% 100%',
                    }"
                  >
                    <span>销售区域占比</span>
                  </div>
                </div>
                <div class="chart_sb" ref="diquchanpinxiaoshouqingkuang">
                  <!-- <div class="com_box">
                    <div class="box_m gjpm">
                      <div class="box_l">
                        <div
                          class="com_chart"
                          key="domDqpm"
                          ref="domDqpm"
                        ></div>
                      </div>
                      <div class="box_r">
                        <div>
                          <span>累计下单总重</span
                          ><label>{{ ljxdzje }}吨</label>
                        </div>
                        <div>
                          <div class="com_table">
                            <div class="thead">
                              <div>排名</div>
                              <div>区域</div>
                              <div>订单数</div>
                              <div>重量/吨</div>
                            </div>
                            <div class="tbody" style="height: 110px">
                              <div class="tr" v-for="(item, index) in xsTable">
                                <div>NO.{{ index + 1 }}</div>
                                <div>{{ item.gj }}</div>
                                <div>{{ item.dds }}</div>
                                <div>{{ item.xse }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
            <div class="top_middle">
              <div class="top_top">
                <div
                  class="title_guangyun"
                  :style="{
                    background: `url(${componentContent.imageMap['guangyun']}) no-repeat`,
                    'background-size': '100% 100%',
                  }"
                ></div>
                <div class="title_sb">
                  <div
                    class="title_bg"
                    :style="{
                      background: `url(${componentContent.imageMap['titlebg']}) no-repeat`,
                      'background-size': '100% 100%',
                    }"
                  >
                    <span>准时交付数</span>
                  </div>
                </div>
                <div class="chart_sb" ref="domDdzjl"></div>
              </div>
              <div class="top_bottom">
                <div
                  class="title_guangyun"
                  :style="{
                    background: `url(${componentContent.imageMap['guangyun']}) no-repeat`,
                    'background-size': '100% 100%',
                  }"
                ></div>
                <div class="title_sb">
                  <div
                    class="title_bg"
                    :style="{
                      background: `url(${componentContent.imageMap['titlebg']}) no-repeat`,
                      'background-size': '100% 100%',
                    }"
                  >
                    <span>订单完成率</span>
                  </div>
                </div>
                <div class="chart_sb" ref="domDdwcl"></div>
              </div>
            </div>
            <div class="top_right">
              <div class="top_top">
                <div
                  class="title_guangyun"
                  :style="{
                    background: `url(${componentContent.imageMap['guangyun']}) no-repeat`,
                    'background-size': '100% 100%',
                  }"
                ></div>
                <div class="title_sb">
                  <div
                    class="title_bg"
                    :style="{
                      background: `url(${componentContent.imageMap['titlebg']}) no-repeat`,
                      'background-size': '100% 100%',
                    }"
                  >
                    <span>客户统计</span>
                  </div>
                </div>
                <div class="chart_sb" ref="kehupaiming"></div>
              </div>
              <div class="top_bottom">
                <div
                  class="title_guangyun"
                  :style="{
                    background: `url(${componentContent.imageMap['guangyun']}) no-repeat`,
                    'background-size': '100% 100%',
                  }"
                ></div>
                <div class="title_sb">
                  <div
                    class="title_bg"
                    :style="{
                      background: `url(${componentContent.imageMap['titlebg']}) no-repeat`,
                      'background-size': '100% 100%',
                    }"
                  >
                    <span>销售产品占比</span>
                  </div>
                </div>
                <div class="chart_sb" ref="xiaoshouchanpinzhanbi"></div>
              </div>
            </div>
          </div>
          <div class="bottomArea">
            <div class="bottom_left">
              <div
                class="title_guangyun"
                :style="{
                  background: `url(${componentContent.imageMap['guangyun']}) no-repeat`,
                  'background-size': '100% 100%',
                }"
              ></div>
              <div class="title_sb">
                <div
                  class="title_bg"
                  :style="{
                    background: `url(${componentContent.imageMap['titlebg']}) no-repeat`,
                    'background-size': '100% 100%',
                  }"
                >
                  <span>订单生产进度</span>
                </div>
              </div>
              <div class="chart_sb">
                <div class="table_">
                  <div class="table-wrapper">
                    <!-- 表头固定 -->
                    <div class="table-header">
                      <el-table
                        :data="tableData1"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        algin="center"
                      >
                        <!-- <el-table-column type="index" label="排名" width="50">
                        </el-table-column> -->
                        <el-table-column
                          prop="workorder_no"
                          label="工单号"
                          width=""
                        >
                        </el-table-column>
                        <el-table-column prop="material_name" label="产品名称">
                        </el-table-column>
                        <el-table-column prop="material_spec" label="规格数量">
                        </el-table-column>
                        <el-table-column
                          prop="plan_quantity"
                          label="排产数量"
                          width="120"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="completed_quantity"
                          label="已完成数量"
                          width="120"
                        >
                        </el-table-column>
                        <el-table-column prop="end_date" label="计划结束">
                        </el-table-column>
                      </el-table>
                    </div>

                    <!-- 表格内容可滚动 -->
                    <div
                      class="scroll-wrapper"
                      :style="{
                        transform: `translateY(-${scrollPosition}px)`,
                        transition: isSmooth ? 'transform 1s linear' : 'none',
                      }"
                      @transitionend="onTransitionEnd"
                    >
                      <el-table
                        :data="extendedData"
                        style="width: 100%; height: 100%"
                        ref="table"
                        :show-header="false"
                        :row-class-name="tableRowClassName"
                        algin="center"
                      >
                        <el-table-column
                          prop="workorder_no"
                          label="工单号"
                          width=""
                        >
                        </el-table-column>
                        <el-table-column prop="material_name" label="产品名称">
                        </el-table-column>
                        <el-table-column prop="material_spec" label="规格数量">
                        </el-table-column>
                        <el-table-column
                          prop="plan_quantity"
                          label="排产数量"
                          width="120"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="completed_quantity"
                          label="已完成数量"
                          width="120"
                        >
                        </el-table-column>
                        <el-table-column prop="end_date" label="计划结束">
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom_right">
              <div
                class="title_guangyun"
                :style="{
                  background: `url(${componentContent.imageMap['guangyun']}) no-repeat`,
                  'background-size': '100% 100%',
                }"
              ></div>
              <div class="title_sb">
                <div
                  class="title_bg"
                  :style="{
                    background: `url(${componentContent.imageMap['titlebg']}) no-repeat`,
                    'background-size': '100% 100%',
                  }"
                >
                  <span>工单生产进度</span>
                </div>
              </div>
              <div
                class="chart_sb"
                style="
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  margin-top: 20px;
                "
              >
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height: 120px;
                    width: 150px;
                    color: #ffffff;
                  "
                >
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['yuan']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '40px',
                      width: '40px',
                    }"
                  >
                    <div
                      class=""
                      :style="{
                        background: `url(${componentContent.imageMap['jiantou-you']}) no-repeat`,
                        'background-size': '100% 100%',
                        height: '12px',
                        width: '120px',
                        marginTop: '15px',
                        marginLeft: '55px',
                      }"
                    ></div>
                  </div>
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['fang']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '42px',
                      width: '150px',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }"
                  >
                    <span style="margin-top: 4px">{{ jindu.n1 }}</span>
                  </div>
                  <span>{{ jindu.v1 }} %</span>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height: 120px;
                    width: 150px;
                    color: #ffffff;
                  "
                >
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['yuan']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '40px',
                      width: '40px',
                    }"
                  >
                    <div
                      class=""
                      :style="{
                        background: `url(${componentContent.imageMap['jiantou-you']}) no-repeat`,
                        'background-size': '100% 100%',
                        height: '12px',
                        width: '120px',
                        marginTop: '15px',
                        marginLeft: '55px',
                      }"
                    ></div>
                  </div>
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['fang']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '42px',
                      width: '150px',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }"
                  >
                    <span style="margin-top: 4px">{{ jindu.n2 }}</span>
                  </div>
                  <span>{{ jindu.v2 }} %</span>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height: 120px;
                    width: 150px;
                    color: #ffffff;
                  "
                >
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['yuan']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '40px',
                      width: '40px',
                    }"
                  >
                    <div
                      class=""
                      :style="{
                        background: `url(${componentContent.imageMap['jiantou-you']}) no-repeat`,
                        'background-size': '100% 100%',
                        height: '12px',
                        width: '120px',
                        marginTop: '15px',
                        marginLeft: '55px',
                      }"
                    ></div>
                  </div>
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['fang']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '42px',
                      width: '150px',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }"
                  >
                    <span style="margin-top: 4px">{{ jindu.n3 }}</span>
                  </div>
                  <span>{{ jindu.v3 }} %</span>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height: 120px;
                    width: 150px;
                    color: #ffffff;
                  "
                >
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['yuan']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '40px',
                      width: '40px',
                    }"
                  >
                    <div
                      class=""
                      :style="{
                        background: `url(${componentContent.imageMap['jiantou-you']}) no-repeat`,
                        'background-size': '100% 100%',
                        height: '12px',
                        width: '120px',
                        marginTop: '15px',
                        marginLeft: '55px',
                      }"
                    ></div>
                  </div>
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['fang']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '42px',
                      width: '150px',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }"
                  >
                    <span style="margin-top: 4px">{{ jindu.n4 }}</span>
                  </div>
                  <span>{{ jindu.v4 }} %</span>
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    height: 120px;
                    width: 150px;
                    color: #ffffff;
                  "
                >
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['yuan']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '40px',
                      width: '40px',
                    }"
                  ></div>
                  <div
                    class=""
                    :style="{
                      background: `url(${componentContent.imageMap['fang']}) no-repeat`,
                      'background-size': '100% 100%',
                      height: '42px',
                      width: '150px',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }"
                  >
                    <span style="margin-top: 4px">{{ jindu.n5 }}</span>
                  </div>
                  <span>{{ jindu.v5 }} %</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </bigScreenContainer>
</template>
<script>
// import * as echarts from "echarts";

export default {
  name: "sjkbView", // 研发
  data() {
    return {
      componentContent,
      nowYear: "",
      nowMonth: "",
      monthData: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      data1: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      data2: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      data3: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      data4: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      data5: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      data6: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      khpmD: [0, 0, 0, 0, 0],
      khpmY: ["-", "-", "-", "-", "-"],
      option41_dataX: [],
      option41_dataY: [],
      extendedData: [], // 扩展后的数据（首尾相连）
      scrollPosition: 0, // 当前滚动位置
      rowHeight: 50, // 单行高度（需根据实际表格调整）
      isSmooth: true, // 是否启用平滑滚动
      timer: null, // 定时器
      tableData1: [],
      tableData: [],
      sczs: 0,
      llzs: 0,
      jsrkzs: 0,
      xsht_je: 0,
      xsyyData: {
        xsmb_ndxsjr: "16343.67",
        whsd: "16.9",
        sj: "4211",
        xsmb_ndxsmb: "35000.00",
        tbzz: "12.00",
        whwd: "28.5",
        kqzl: "5.6",
        xsmb_tbxsjr: "18573.32",
        fcnd: "26.3",
        yx: "3257",
      },
      year: [],
      xszsData: {},
      yfData: {},
      bgfyData: {},
      bxfData: {},
      jypjeData: {},
      dfhslData: {},
      dfhjeData: {},
      yjPosData: {},
      sjPosData: {},
      dclData: {},
      xsycData: {},
      xsycsjData: {},
      xsycycData: {},
      gjzbData: {},
      gjpmData: {},
      ljxdzje: 0,
      khTable: [],
      xsTable: [],
      jindu: {},
    };
  },
  computed: {
    kehupaiming() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "8%",
          bottom: "3%",
          top: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#DDDDDD",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#DDDDDD",
            },
          },
        },
        yAxis: {
          type: "category",
          data: this.khpmY,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
            },
          },
        },
        legend: { show: false },
        dataZoom: [
          {
            type: "slider",
            yAxisIndex: 0,
            startValue: 0,
            endValue: 3, // 显示第 0 到第 9 项（共 10 条）
            show: false, // 不显示滑动条
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            data: this.khpmD,
            barWidth: 16,
            itemStyle: {
              borderRadius: [0, 8, 8, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: "#DDDDDD" },
                { offset: 1, color: "#43A8F4" },
              ]),
            },
          },
        ],
      };
    },
  },
  async created() {
    this.nowYear = new Date().getFullYear();
    this.nowMonth = new Date().getMonth() + 1;
    console.log(this.nowYear, this.nowMonth);
  },
  async mounted() {
    let date = new Date();
    this.year = [date.getFullYear() - 1, date.getFullYear()];
    await Promise.all([
      this.getData1(),
      this.getData2(),
      this.getData3(),
      this.getData4(),
      this.getData5(),
      this.getData6(),
      this.getData7(),
      this.getData8(),
      this.getData9(),
      this.getData11(),
      this.getData12(),
      this.getData13(),
    ]).then(
      ([
        result1,
        result2,
        result3,
        result4,
        result5,
        result6,
        result7,
        result8,
        result9,
        result11,
        result12,
        result13,
      ]) => {
        console.log("所有请求完成：");
        console.log(
          result1,
          result2,
          result3,
          result4,
          result5,
          result6,
          result7,
          result8,
          result9
        );
        console.log(result11);
        console.log(result12);
        console.log(result13);

        let result1Data = result1.sort((a, b) => a.xse - b.xse);
        this.khpmY = result1Data.map((item) => {
          return item.khmc;
        });
        this.khpmD = result1Data.map((item) => {
          return item.xse;
        });

        let result2Data = result2;
        this.gyspmY = result2Data.map((item) => {
          return item.gysmc;
        });
        this.gyspmD = result2Data.map((item) => {
          return item.htje;
        });

        this.xscpzb = result3.map((item) => {
          return { value: item.number, name: item.name };
        });

        this.dqpmData = result4.map((item) => {
          return { value: item.hte, name: item.gj };
        });

        result5.forEach((item) => {
          if (item.gx && item.hgl) {
            this.option41_dataX.unshift(item.gx);
            this.option41_dataY.unshift(item.hgl);
          }
        });

        this.tableData = result6.map((item) => {
          item.end_date = item.end_date.substring(0, 10);
          item.gy = JSON.parse(item.gy.value);
          return {
            ...item,
          };
        });
        this.jindu = {
          n1: this.tableData[0].gy[0].gx_mc,
          v1: this.tableData[0].gy[0].gx_progress,
          n2: this.tableData[0].gy[1].gx_mc,
          v2: this.tableData[0].gy[1].gx_progress,
          n3: this.tableData[0].gy[2].gx_mc,
          v3: this.tableData[0].gy[2].gx_progress,
          n4: this.tableData[0].gy[3].gx_mc,
          v4: this.tableData[0].gy[3].gx_progress,
          n5: this.tableData[0].gy[4].gx_mc,
          v5: this.tableData[0].gy[4].gx_progress,
        };
        console.log(this.tableData);

        this.xsht_je = result7;
        this.jsrkzs = result8;
        this.llzs = result9.llzs;
        this.sczs = result9.sczs;

        this.xsyyData = result11[0];
        this.year.forEach((item) => {
          this.xszsData[item] = [];
          this.yfData[item] = [];
          this.bgfyData[item] = [];
          this.bxfData[item] = [];
          this.jypjeData[item] = [];
          this.dfhslData[item] = [];
          this.dfhjeData[item] = [];
          this.yjPosData[item] = [];
          this.sjPosData[item] = [];
          this.dclData[item] = [];
          this.xsycsjData[item] = [];
          this.xsycycData[item] = [];
          for (let i = 1; i < 13; i++) {
            let obj =
              result12.find((it) => it.year == item && it.month == i) || {};
            this.xszsData[item].push(obj.xszs || "");
            this.yfData[item].push(obj.yfjj || "");
            this.bgfyData[item].push(obj.bgfjj || "");
            this.bxfData[item].push(obj.bxf || "");
            this.jypjeData[item].push(obj.jypje || "");
            this.dfhslData[item].push(obj.dfhsl || "");
            this.dfhjeData[item].push(obj.dfhje || "");
            this.yjPosData[item].push(obj.yjdds || "");
            this.sjPosData[item].push(obj.sjdds || "");
            this.dclData[item].push(
              ((obj.sjdds / obj.yjdds) * 100).toFixed(2) || ""
            );
            this.xsycsjData[item].push(obj.sjxsje || "");
            this.xsycycData[item].push(obj.xsycje || "");
          }
        });

        let totaldd = 0,
          totalht = 0;
        let mapData = [];
        let rest = result13;
        rest.forEach((item) => {
          totaldd += Number(item.xse);
          totalht += Number(item.hte);
          mapData.push({ name: item.gj, value: item.xse });
        });
        this.dataList = mapData;
        this.ljxdzje = totaldd;
        let arrHt = rest.sort(function (a, b) {
          return Number(b.hte) - Number(a.hte);
        });
        this.khTable = JSON.parse(JSON.stringify(arrHt));
        arrHt = arrHt.slice(0, 5);
        let xData = [],
          data = [];
        arrHt.forEach((item) => {
          xData.push(item.gj);
          data.push(((item.hte / totalht) * 100).toFixed(2));
        });
        this.gjzbData.x = xData.reverse();
        this.gjzbData.data = data.reverse();

        let arrDd = rest.sort(function (a, b) {
          return Number(b.xse) - Number(a.xse);
        });
        this.xsTable = JSON.parse(JSON.stringify(arrDd));
        arrDd = arrDd.slice(0, 6);
        let gjpm = [];
        arrDd.forEach((item) => {
          gjpm.push({ value: item.xse, name: item.gj });
        });
        this.gjpmData = gjpm;

        this.initializeData(); // 初始化数据
        this.startScroll(); // 开始滚动

        this.$nextTick(() => {
          // 动态 DOM 更新后重新获取高度
          const heights = this.getRowHeights();
          this.rowHeight = heights[0];
          console.log("更新后的行高：", heights);
          // this.scorllChart2();
          this.scorllChart1();
          this.updateChartView4();
          this.updateChartView5();
          // this.updateChartView6();
          this.updateChartView11();
          this.updateChartView12();
          this.updateChartView13();
        });
      }
    );
  },
  beforeDestroy() {
    this.stopScroll(); // 清除定时器
  },
  methods: {
    getRowHeights() {
      // 获取表格的 DOM 元素
      const tableElement = this.$refs.table.$el;
      console.log(tableElement);
      // 获取所有行
      const rows = tableElement.querySelectorAll(".el-table__row");
      // 遍历每一行并获取高度
      const heights = Array.from(rows).map((row) => row.offsetHeight);
      console.log("每行高度：", heights);
      return heights;
    },
    // 初始化扩展数据
    initializeData() {
      // 扩展数据：将原始数据复制一份追加到末尾
      this.extendedData = [...this.tableData, ...this.tableData];
    },
    // 开始滚动
    startScroll() {
      let num = 0;
      this.timer = setInterval(() => {
        this.scrollPosition += this.rowHeight; // 向下滚动一行
        this.isSmooth = true; // 平滑过渡
        // 如果滚动到最后一行（原始数据长度），等待过渡完成后跳回顶部
        if (this.scrollPosition >= this.rowHeight * this.tableData.length) {
          setTimeout(() => {
            this.isSmooth = false; // 关闭过渡
            this.scrollPosition = 0; // 瞬间跳回顶部
          }, 1900);
        }
        num++;
        if (num == this.tableData.length) {
          num = 0;
          this.jindu = {
            n1: this.tableData[0].gy[0].gx_mc,
            v1: this.tableData[0].gy[0].gx_progress,
            n2: this.tableData[0].gy[1].gx_mc,
            v2: this.tableData[0].gy[1].gx_progress,
            n3: this.tableData[0].gy[2].gx_mc,
            v3: this.tableData[0].gy[2].gx_progress,
            n4: this.tableData[0].gy[3].gx_mc,
            v4: this.tableData[0].gy[3].gx_progress,
            n5: this.tableData[0].gy[4].gx_mc,
            v5: this.tableData[0].gy[4].gx_progress,
          };
        } else {
          this.jindu = {
            n1: this.tableData[num].gy[0].gx_mc,
            v1: this.tableData[num].gy[0].gx_progress,
            n2: this.tableData[num].gy[1].gx_mc,
            v2: this.tableData[num].gy[1].gx_progress,
            n3: this.tableData[num].gy[2].gx_mc,
            v3: this.tableData[num].gy[2].gx_progress,
            n4: this.tableData[num].gy[3].gx_mc,
            v4: this.tableData[num].gy[3].gx_progress,
            n5: this.tableData[num].gy[4].gx_mc,
            v5: this.tableData[num].gy[4].gx_progress,
          };
        }
      }, 2000); // 每2秒滚动一次
    },
    // 停止滚动
    stopScroll() {
      clearInterval(this.timer);
    },
    // 监听过渡结束事件（备用）
    onTransitionEnd() {
      if (this.scrollPosition >= this.rowHeight * this.tableData.length) {
        this.isSmooth = false;
        this.scrollPosition = 0;
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 4 == 1) {
        return "warning-row";
      } else if (rowIndex % 4 == 3) {
        return "success-row";
      }
      return "odd-row";
    },
    updateChartView13(start, viewSize) {
      let option = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "1%",
          bottom: "20%",
          left: "1%",
          right: "1%",
        },
        legend: {
          bottom: "2%",
          left: "center",
          itemWidth: 8,
          itemHeight: 3,
          itemGap: 15,
          textStyle: {
            color: "#EEEEEE",
            fontWeight: 600,
            fontSize: 12,
          },
          // formatter: (name) => {
          //     let data = option.series[0].data;
          //     let tarValue;
          //     for (let i = 0; i < data.length; i++) {
          //         if (data[i].name == name) {
          //             tarValue = data[i].value;
          //         }
          //     }
          //     return `${name}\n${tarValue}万元`;
          // },
        },
        title: {
          show: true,
          text: "地区产品\n销售情况",
          left: "center",
          top: "32%",
          textStyle: {
            color: "#DDDDDD",
            fontSize: 12,
            fontWeight: 400,
          },
        },
        // color: ["#1A79FF", "#97D6BF"],
        series: [
          {
            name: "地区产品销售情况",
            type: "pie",
            center: ["50%", "40%"],
            radius: ["35%", "65%"],
            avoidLabelOverlap: false,
            label: {
              position: "inside",
              formatter: "{d}%",
              textStyle: {
                color: "#DDDDDD",
                fontSize: 14,
                fontWeight: 600,
              },
            },
            labelLine: {
              show: false,
            },
            data: this.gjpmData,
          },
        ],
      };
      this.$nextTick(() => {
        echarts.init(this.$refs.domDqpm).setOption(option);
      });
    },
    updateChartView12(start, viewSize) {
      let hkbl = Number(
        ((this.xsyyData.xsht_hkje / this.xsyyData.xsht_je) * 100).toFixed(2)
      );
      console.log(hkbl);

      let option2 = {
        grid: {
          top: "18%",
          bottom: "10%",
          left: "8%",
          right: "8%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: [
          {
            type: "value",
            name: "单位：个",
            nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#DDDDDD",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#DDDDDD",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: { color: "#DDDDDD" },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#DDDDDD",
              formatter: "{value}%",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#DDDDDD",
              },
            },
          },
        ],
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#43A8F4", "#D9C562", "#20FCFF"],
        series: [
          {
            type: "bar",
            name: "应交PO数",
            barWidth: 10,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],
            },
            data: [
              3000, 2500, 1500, 600, 1000, 1400, 2500, 3600, 4001, 1007, 2008,
              1001,
            ],
          },
          {
            type: "bar",
            name: "实交PO数",
            barWidth: 10,
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0],
            },
            data: [1430, 5825, 4515, 5336, 4410, 1254, 2242],
          },
        ],
      };
      let option3 = {
        grid: {
          top: "20%",
          bottom: "15%",
          left: "8%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
          ],
        },
        yAxis: {
          type: "value",
          name: "单位：%",
          nameTextStyle: { color: "#DDDDDD", padding: [0, 30, 4, 0] },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["rgba(67, 168, 244, 1)"],
        series: [
          {
            symbol: "emptyCircle",
            symbolSize: 8,
            lineStyle: {
              width: 4,
              type: "solid",
            },
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "#F2B39D",
            },
            type: "line",
            name: "达成率",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(67, 168, 244, 0.8)" }, // 渐变色的起始颜色
                { offset: 1, color: "transparent" }, // 渐变色的结束颜色
              ]),
            },

            data: [14, 58, 45, 53, 44, 12, 22],
          },
        ],
      };
      option2.series[0].data = this.yjPosData[this.year[1]];
      option2.series[1].data = this.sjPosData[this.year[1]];
      option3.series[0].data = this.dclData[this.year[1]];
      this.$nextTick(() => {
        echarts.init(this.$refs.domDdzjl).setOption(option2);
        echarts.init(this.$refs.domDdwcl).setOption(option3);
      });
    },
    updateChartView11(start, viewSize) {
      let hkbl = Number(
        ((this.xsyyData.xsht_hkje / this.xsyyData.xsht_je) * 100).toFixed(2)
      );
      console.log(hkbl);

      let option = {
        title: [
          {
            text: hkbl + "%",
            left: "center",
            top: "38%",
            textStyle: {
              fontSize: 32,
              color: "#DDDDDD",
              fontWeight: "600",
            },
          },
          {
            text: "回款比例",
            left: "center",
            top: "50%",
            textStyle: {
              fontSize: 18,
              color: "#DDDDDD",
              fontWeight: "400",
            },
          },
        ],
        polar: {
          //极坐标系地底板
          radius: ["55%", "75%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          //角度轴，一个圆圈
          max: 100,
          show: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        color: ["#0095FF"],
        series: [
          {
            name: "",
            type: "bar",
            roundCap: true,
            barWidth: 90,
            showBackground: true,
            backgroundStyle: {
              color: "#DDDDDD",
            },
            coordinateSystem: "polar",
            data: [hkbl],
          },
        ],
      };
      this.$nextTick(() => {
        echarts.init(this.$refs.salesChart).setOption(option);
      });
    },
    updateChartView6(start, viewSize) {
      let option = {
        grid: {
          top: "20%",
          bottom: "15%",
          left: "6%",
          right: "3%",
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          data: this.option41_dataX,
        },
        yAxis: {
          type: "value",
          name: "单位：%",
          nameTextStyle: {
            color: "#DDDDDD",
            padding: [0, 30, 4, 0],
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#DDDDDD",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
          },
        },
        legend: {
          right: "20",
          top: "10",
          textStyle: { color: "#DDDDDD" },
          itemWidth: 8,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ["#43A8F4"],
        series: [
          {
            type: "bar",
            name: "",
            barWidth: 20,
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
            },
            data: this.option41_dataY,
          },
        ],
      };
      this.$nextTick(() => {
        echarts.init(this.$refs.gongxuhegelvDom).setOption(option);
      });
    },
    updateChartView5(start, viewSize) {
      let option = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "1%",
          bottom: "20%",
          left: "1%",
          right: "1%",
        },
        legend: {
          right: "4%",
          top: "center",
          orient: "vertical",
          itemWidth: 8,
          itemHeight: 3,
          itemGap: 15,
          textStyle: {
            color: "#EEEEEE",
            fontWeight: 600,
            fontSize: 12,
          },
        },
        series: [
          {
            name: "地区产品销售情况",
            type: "pie",
            center: ["40%", "50%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              formatter: "{b}: {c}吨\n{d}%",
              color: "#FFFFFF", // 白色字体，适配深蓝背景
              textStyle: {
                fontSize: 10,
                fontWeight: 600,
              },
            },
            labelLine: {
              lineStyle: {
                width: 1,
                color: "#AAAAAA", // 更清晰的连线
              },
            },
            itemStyle: {
              borderColor: "#0F1C3C", // 与背景一致，形成分隔感
              borderWidth: 2,
            },
            data: this.dqpmData || [], // 保留原有数据
            color: [
              "#4FC3F7", // 天空蓝
              "#FF8A65", // 珊瑚橙
              "#9575CD", // 淡紫色
              "#4DB6AC", // 青绿色
              "#F06292", // 粉红玫瑰
              "#BA68C8", // 淡洋紫
              "#FFD54F", // 柠檬黄
              "#81C784", // 绿松石
              "#90A4AE", // 石板灰
              "#7986CB", // 柔和蓝
            ],
          },
        ],
      };
      this.$nextTick(() => {
        echarts.init(this.$refs.diquchanpinxiaoshouqingkuang).setOption(option);
      });
    },
    updateChartView4(start, viewSize) {
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "1%",
          top: "center",
          orient: "vertical",
          itemWidth: 12,
          itemHeight: 4,
          itemGap: 8,
          textStyle: {
            color: "#FFFFFF", // 更亮
            fontSize: 12,
          },
        },
        series: [
          {
            name: "产品销售情况",
            type: "pie",
            center: ["60%", "50%"],
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              formatter: "{b}: {c}吨\n{d}%",
              color: "#FFFFFF", // 白色字体，适配深蓝背景
              textStyle: {
                fontSize: 10,
                fontWeight: 600,
              },
            },
            labelLine: {
              lineStyle: {
                width: 1,
                color: "#AAAAAA", // 更清晰的连线
              },
            },
            itemStyle: {
              borderColor: "#0F1C3C", // 与背景一致，形成分隔感
              borderWidth: 2,
            },
            data: this.xscpzb || [], // 保留原有数据
            color: [
              "#4B8BFF",
              "#00C2FF",
              "#3DE3FF",
              "#589EF8",
              "#6AC1FF",
              "#90E0FF",
              "#00A8F0",
            ], // 冷色系蓝色调配色
          },
        ],
      };
      this.$nextTick(() => {
        echarts.init(this.$refs.xiaoshouchanpinzhanbi).setOption(option);
      });
    },
    scorllChart2() {
      const viewSize = 8;
      let startIndex = this.gyspmY.length;
      this.updateChartView2(startIndex, viewSize);
      setInterval(() => {
        startIndex--;
        if (startIndex - viewSize < 0) {
          startIndex = this.gyspmY.length;
        }
        this.updateChartView2(startIndex, viewSize);
      }, 2000);
    },
    updateChartView2(start, viewSize) {
      const xData = this.gyspmY.slice(start - viewSize, start);
      const dData = this.gyspmD.slice(start - viewSize, start);

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "4%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData,
          axisTick: { show: false },
          axisLine: { lineStyle: { color: "#DDDDDD" } },
          axisLabel: {
            interval: 1, // 强制显示所有刻度标签
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: { color: "#DDDDDD" },
          },
          splitLine: {
            show: true,
            lineStyle: { type: "dashed", color: "#DDDDDD" },
          },
        },
        legend: { show: false },
        series: [
          {
            name: "",
            type: "bar",
            data: dData,
            barWidth: 18,
            itemStyle: {
              borderRadius: [8, 8, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2378f7" },
                { offset: 1, color: "#83bff6" },
              ]),
            },
          },
        ],
      };
      const chart = echarts.init(this.$refs.gongyingshangpaiming);
      chart.setOption(option);
    },
    scorllChart1() {
      const viewSize = 4;
      let startIndex = this.khpmY.length;
      this.updateChartView1(startIndex, viewSize);
      setInterval(() => {
        startIndex--;
        if (startIndex - viewSize < 0) {
          startIndex = this.khpmY.length;
        }
        this.updateChartView1(startIndex, viewSize);
      }, 2000);
    },
    updateChartView1(start, viewSize) {
      const viewY = this.khpmY.slice(start - viewSize, start);
      const viewD = this.khpmD.slice(start - viewSize, start);

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "8%",
          bottom: "3%",
          top: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#DDDDDD",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#DDDDDD",
            },
          },
        },
        yAxis: {
          type: "category",
          data: viewY,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
            },
          },
        },
        legend: { show: false },
        series: [
          {
            name: "",
            type: "bar",
            data: viewD,
            barWidth: 16,
            itemStyle: {
              borderRadius: [0, 8, 8, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: "#DDDDDD" },
                { offset: 1, color: "#43A8F4" },
              ]),
            },
          },
        ],
      };
      const chart = echarts.init(this.$refs.kehupaiming);
      chart.setOption(option);
    },
    getData13() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.XS.db.manage.selectBoardXsDt",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData12() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode("SJKB.XS.db.manage.selectBoardXsY", {}).then(
          (res) => {
            if (res.code == 200) {
              resolve(res.data);
            } else {
              reject("err");
            }
          }
        );
      });
    },
    getData11() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.XS.db.manage.selectBoardXsAtt",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData1() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.XS.db.manage.selectBoardXsKhtj",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData2() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode("SJKB.CG.db.manage.selectByHtje", {}).then(
          (res) => {
            if (res.code == 200) {
              resolve(res.data);
            } else {
              reject("err");
            }
          }
        );
      });
    },
    getData3() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.XS.db.manage.selectBoardXsCpzb",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData4() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.XS.db.manage.selectBoardXsDt",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData5() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.ZL.db.manage.selectBoardZlGxhgl",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData6() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "wyzz.kanban.db.selectworkorder.selectWorkorderGroup",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject("err");
          }
        });
      });
    },
    getData7() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.XS.db.manage.selectBoardXsAtt",
          {}
        ).then((res) => {
          if (res.code == 200) {
            resolve(res.data[0].xsht_je);
          } else {
            reject("err");
          }
        });
      });
    },
    getData8() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.CC.db.manage.selectBoardCcjskc",
          {}
        ).then((res) => {
          if (res.code == 200) {
            let jsrkzs = 0;
            res.data.forEach((item) => {
              jsrkzs += Number(item.sl);
            });
            resolve(jsrkzs);
          } else {
            reject("err");
          }
        });
      });
    },
    getData9() {
      return new Promise((resolve, reject) => {
        this.WitGlobal.requestCode(
          "SJKB.ZL.db.manage.selectBoardZlJyjd",
          {}
        ).then((res) => {
          if (res.code == 200) {
            let sczs = 0;
            let llzs = 0;
            res.data.forEach((item) => {
              if (item.jylx == "生产检验任务") {
                sczs =
                  Number(item.zxzrws) +
                  Number(item.cqrws) +
                  Number(item.dpfrws) +
                  Number(item.ywcrws);
              }
              if (item.jylx == "来料检验任务") {
                llzs =
                  Number(item.zxzrws) +
                  Number(item.cqrws) +
                  Number(item.dpfrws) +
                  Number(item.ywcrws);
              }
            });
            resolve({ sczs, llzs });
          } else {
            reject("err");
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table td > .cell {
  padding-left: 10px;
}

.el-table {
  height: 284px;
}

.el-table .warning-row {
  background: rgba(52, 57, 70, 0.2);
}

.el-table .success-row {
  background: rgba(52, 57, 70, 0.2);
}

.el-table .odd-row {
  background: rgba(29, 35, 49, 0.2);
}

.el-table .el-table__cell {
  font-size: 16px !important;
  text-align: center;
}

.table_ {
  width: 100%;
  height: 284px;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
}

.el-table th {
  background-color: rgba(29, 35, 49, 0.2);
  color: #409eff;
}

.el-table {
  background: rgba(29, 35, 49, 0.2);
  color: #dddddd;
}

.table-wrapper {
  position: relative;
  /* 设置表格总高度，包含表头 */
}

.table-header .el-table {
  margin-top: -2px;
  height: 44px;
}

.table-header {
  /* 表头固定在顶部 */
  position: relative;
  top: 0px;
  height: 44px;
  z-index: 1;
  /* 确保表头在上层 */
  .el-table tr {
    background-color: #034f79;
  }
}

.scroll-wrapper {
  /* 表格内容容器，滚动的部分 */
  // height: 100%;
  /* 隐藏溢出的内容 */
  // position: relative;
  // display: block;
  overflow: hidden;
}

.scroll-wrapper .el-table__body {
  /* 内容部分需要启用平滑滚动效果 */
  will-change: transform;
}

/* 自定义渐变色进度条 */
.custom-gradient-progress .el-progress-bar__inner {
  background: linear-gradient(270deg, #00efff 0%, #00527d 100%) !important;
  transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  border-radius: 4px;
}

.el-progress-bar__outer {
  background-color: rgb(27, 63, 99);
  height: 3px !important;
  border-radius: 4px;
}

.table_ {
  width: 100%;
  height: 284px;
  background: rgba(255, 255, 255, 0);
  position: relative;
  overflow: hidden;
}

// rgb(14, 58, 104);
.table-wrapper {
  position: relative;
  /* 设置表格总高度，包含表头 */
}

.table-header {
  /* 表头固定在顶部 */
  position: relative;
  top: 0px;
  height: 40px;
  z-index: 1;
  /* 确保表头在上层 */
}

.scroll-wrapper {
  /* 表格内容容器，滚动的部分 */
  // height: 100%;
  /* 隐藏溢出的内容 */
  // position: relative;
  // display: block;
  overflow: hidden;
}

.scroll-wrapper .el-table__body {
  /* 内容部分需要启用平滑滚动效果 */
  will-change: transform;
}

.no-hover-table .el-table__body tr:hover > td {
  background-color: transparent !important;
}

.no-hover-table .el-table__row {
  background-color: rgba(10, 43, 82, 0.99);
  /* 略透明 */
}

#no-hover-table {
  background-color: transparent !important;

  td {
    background: rgb(10, 43, 82) !important;
    color: #ffffff;
    height: 40px !important;
    border: 0px solid rgba(25, 198, 255, 0) !important;
    border-top: 1px solid rgb(28, 100, 146) !important;
    border-bottom: 1px solid rgb(28, 100, 146) !important;
  }

  td:first-child {
    border-left: 1px solid rgb(28, 100, 146) !important;
    // border-radius: 6px 0px 0px 6px;
  }

  td:nth-last-child(1) {
    border-right: 1px solid rgb(28, 100, 146) !important;
    // border-radius: 0px 6px 6px 0px;
  }
}

.no-hover-table.el-table {
  border: 0px solid #ebeef5;
}

.no-hover-table .el-table__body,
.no-hover-table .el-table__header {
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
  /* 行间距设置在这里！ */
  background: transparent;
}

.custom-header-table.el-table {
  background: rgb(8, 47, 84) !important;
  border: 0px solid #ebeef5;
}

.el-table td > .cell {
  padding-left: 10px;
}

.custom-header-table {
  /* 表头整体样式 */
  .el-table__header-wrapper {
    th {
      background: rgb(8, 47, 84) !important;
      // background: rgb(41, 76, 146) !important;
      // border: 1px solid rgba(25, 198, 255, 0) !important;
      border-bottom: 1px solid rgb(28, 100, 146) !important;
      border-top: 1px solid rgb(28, 100, 146) !important;
      border-left: 1px solid rgb(8, 47, 84) !important;
      border-right: 1px solid rgb(8, 47, 84) !important;
      box-sizing: border-box;

      /* 文字样式 */
      .cell {
        color: #ffffff; // 文字颜色
      }
    }

    th:first-child {
      border-left: 1px solid rgb(28, 100, 146) !important;
    }

    th:nth-last-child(2) {
      border-right: 1px solid rgb(28, 100, 146) !important;
    }

    // /* 表头悬停效果 */
    // tr:hover > th {
    //   background-color: transparent !important;
    // }
  }

  /* 表格边框合并模式 */
  &.el-table--border {
    border-collapse: collapse;

    th:first-child {
      border-left: 1px solid rgba(25, 198, 255, 0.3);
    }

    th:last-child {
      border-right: 1px solid rgba(25, 198, 255, 0.3);
    }
  }

  /* 调整表头高度 */
  .el-table__header {
    tr {
      height: 40px; // 自定义表头高度
    }
  }
}

.table-header .el-table {
  height: 40px;
}

.page_header {
  height: 80px;
  line-height: 70px;
  background: url(./daohang.png) no-repeat;
  background-size: cover;
  font-weight: 600;
  font-size: 24px;
  text-align: center;

  span {
    // font-weight: 600;
    // font-size: 40px;
    // color: #ffffff;
    // text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
    // background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
    // background-clip: text;
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
    // text-align: center;
    // padding-top: 36px;
    font-family: "PangMenZhengDao";
    font-size: 38px;
    font-weight: 700;
    line-height: 44.46px;
    letter-spacing: 2px;

    font-variation-settings: "opsz" auto;
    background: linear-gradient(180deg, #ffffff 30%, #90c4ff 81%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    // text-fill-color: transparent;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
  }
}

.bgPage {
  width: 1920px;
  height: 1080px;
  background: #111726;
}

.text_color {
  color: #ffffff;
}

.text_num_red {
  font-variation-settings: "opsz" auto;
  background: linear-gradient(180deg, #ffffff 48%, #ff5050 83%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text_num {
  font-variation-settings: "opsz" auto;
  background: linear-gradient(180deg, #fdfeff 49%, #0ac3ff 83%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  // text-fill-color: transparent;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.big_num {
  font-weight: 700;
  font-size: 40px;
}

.little_num {
  font-size: 28px;
  font-weight: 700;
}

@keyframes runImages {
  0% {
    background-position: 0px;
  }

  100% {
    background-position: -21000px;
  }
}

.HomePageClass {
  width: 1920px;
  height: 1080px;
  // background: url(./bg.png) no-repeat;
  background: linear-gradient(90deg, #061726 13%, #003a6d 49%, #061726 86%);
  background-size: cover;
  display: flex;
  flex-direction: column;

  .homeContent {
    display: flex;
    flex-direction: column;
    align-items: center;

    .topArea {
      margin-bottom: 30px;
      width: 1920px;
      display: flex;
      justify-content: space-evenly;

      .top_left,
      .top_middle,
      .top_right {
        width: 614px;
        height: 630px;
        position: relative;

        .top_top {
          margin-bottom: 20px;
        }

        .title_guangyun {
          width: 124px;
          height: 70px;
          position: absolute;
          background: url(./guangyun.png) no-repeat;
          background-size: cover;
        }

        .title_sb {
          width: 614px;
          height: 40px;
          background: linear-gradient(
            90deg,
            rgba(57, 125, 175, 0) -1%,
            rgba(57, 125, 175, 0.15) 48%,
            rgba(57, 125, 175, 0) 100%
          );
          font-family: Arial;
          font-size: 18px;
          font-weight: normal;
          line-height: 40px;
          letter-spacing: 0px;
          color: #ffffff;
          text-shadow: 0px 2px 24px #00c0ff;

          .title_bg {
            width: 368px;
            height: 40px;
            background: url(./titlebg.png) no-repeat;
            background-size: cover;

            span {
              padding-left: 40px;
            }
          }
        }

        .chart_sb {
          margin-top: 6px;
          width: 614px;
          height: 266px;
          background: linear-gradient(
            180deg,
            rgba(39, 126, 255, 0.015) -3%,
            rgba(39, 177, 255, 0.12) 100%
          );
          box-shadow: inset 0px 10px 50px 0px rgba(55, 169, 238, 0.05);
          display: flex;
          justify-content: start;
          .com_chart {
            width: 100%;
            height: 100%;
          }
          .com_box {
            flex: auto;
            background: rgba(255, 255, 255, 0.05);
            flex-shrink: 0;
            overflow: hidden;
            padding: 0 10px;

            .gjzb .com_table {
              height: 182px;
            }

            .gjpm .com_table {
              height: 162px;
              display: block;
            }
          }
          .box_m {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            padding-bottom: 10px;

            .box_l {
              width: 40%;
            }

            .box_r {
              flex: auto;
              display: flex;
              flex-direction: column;
              overflow: hidden;

              & > div {
                & > span {
                  font-size: 12px;
                  color: #dddddd;
                }

                & > label {
                  font-weight: 600;
                  font-size: 14px;
                  color: #dddddd;
                }

                &:first-child {
                  margin: 13px 0 5px 5px;
                }
              }
            }
          }
          .st_xsyy {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;

            .left {
              width: 45%;
              height: 100%;
              flex-shrink: 0;
            }

            .right {
              flex: auto;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              flex-shrink: 0;
              margin: 30px 0 10px;

              & > div {
                display: flex;
                flex-direction: row;
                align-items: center;

                span {
                  font-size: 16px;
                  color: #ccc;
                }

                label {
                  font-size: 24px;
                  color: #20fcff;
                  text-align: left;
                  margin-right: 15px;
                }

                p {
                  font-size: 12px;
                  color: #00ff55;
                  margin-top: 7px;
                }
              }
            }
          }
        }
      }
    }

    .bottomArea {
      width: 1920px;
      display: flex;
      justify-content: space-evenly;

      .bottom_left,
      .bottom_right {
        width: 930px;
        height: 308px;
        position: relative;

        .title_guangyun {
          width: 124px;
          height: 70px;
          position: absolute;
          background: url(./guangyun.png) no-repeat;
          background-size: cover;
        }

        .title_sb {
          width: 930px;
          height: 40px;
          background: linear-gradient(
            90deg,
            rgba(57, 125, 175, 0) -1%,
            rgba(57, 125, 175, 0.15) 48%,
            rgba(57, 125, 175, 0) 100%
          );
          font-family: Arial;
          font-size: 18px;
          font-weight: normal;
          line-height: 40px;
          letter-spacing: 0px;
          color: #ffffff;
          text-shadow: 0px 2px 24px #00c0ff;

          .title_bg {
            width: 548px;
            height: 40px;
            background: url(./titlebg.png) no-repeat;
            background-size: cover;

            span {
              padding-left: 40px;
            }
          }
        }

        .chart_sb {
          margin-top: 6px;
          width: 930px;
          height: 284px;
          background: linear-gradient(
            180deg,
            rgba(39, 126, 255, 0.02) -3%,
            rgba(39, 177, 255, 0.12) 100%
          );
          box-shadow: inset 0px 10px 50px 0px rgba(55, 169, 238, 0.05);
          display: flex;
          justify-content: start;
        }
      }
    }
  }
}

/*背景动画-开始*/
#animations {
  position: absolute;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

.animation {
  position: absolute;
}

.animation1 {
  left: 1%;
  top: 1%;
  transform: scale(1);
}

.animation2 {
  left: 0.5%;
  bottom: 13%;
  transform: scale(0.5);
}

.animation3 {
  left: 20%;
  top: 60%;
  transform: scale(1);
}

.animation4 {
  left: 30%;
  top: 15%;
  transform: scale(0.9);
}

.animation5 {
  left: 45%;
  top: 2%;
  transform: scale(0.3);
}

.animation6 {
  left: 60%;
  top: -2%;
  transform: scale(0.8);
}

.animation7 {
  left: 70%;
  top: 40%;
  transform: scale(1);
}

.animation8 {
  right: 12%;
  top: 8%;
  transform: scale(1.1);
}

.animation9 {
  left: 90%;
  bottom: 12%;
  transform: scale(1);
}

.animation10 {
  left: 50%;
  top: 80%;
  transform: scale(1.5);
}

.animation10 div {
  animation-direction: reverse;
}

.animation div {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  animation: move linear infinite;
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.animation .animate1 {
  animation-duration: 30s;
}

.animation .animate2 {
  animation-duration: 20s;
  animation-direction: reverse;
}

.animation .animate3 {
  animation-duration: 15s;
}

.fanzhuan .animate1 {
  animation-direction: reverse;
  animation-duration: 25s;
}

.fanzhuan .animate2 {
  animation-direction: normal;
  animation-duration: 15s;
}

.fanzhuan .animate3 {
  animation-direction: reverse;
  animation-duration: 10s;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
